<template>
	<view class="layui-form-item">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<view class="layui-input-block">
			<view class="layui-unselect layui-form-switch" :class="isOn ? 'layui-form-onswitch' : ''" lay-skin="_switch" @click="switchs">
				<em>{{isOn ? onText : offText}}</em><i></i>
			</view>
			<input type="text" :name="name" :value="isOn" style="display: none;">
		</view>
	</view>
</template>

<script>
	import kit from "../common/kit.js" ;
	export default {
		name: "switchBtn",
		props: {
			title:{
				type : String ,
				default : ""
			},
			onText : {
				type : String ,
				default : "ON"
			},
			offText : {
				type : String ,
				default : "OFF"
			},
			name : {
				type : String ,
				default : ""
			},
			value : {
				type : [Boolean,String,Number] ,
				default : true
			},
			disabled:{
				default : false 
			}
		},
		data() {
			return {
				isOn : !!this.value
			};
		},
		
		created() {
			this.setIsOnValue();
		},
		
		watch:{
			value : function(res){
				this.setIsOnValue();
			}
		},
		
		methods:{
			
			setIsOnValue:function(res){
				this.isOn = this.value == true || this.value == 'true' || this.value == 1 || this.value == "1" ;
				console.log(this.isOn , this.value);
			},
			
			switchs:function(e){
				if(this.disabled){
					return false ;
				}
				this.isOn = !this.isOn ;
				e.detail['value'] = this.isOn ;
				this.$emit("change",e);
			}
		}
	}
</script>

